이미지를 출력한다.
usemap
애트리뷰트가 명시되면 인터랙티브 콘텐츠(interactive content)가 된다.
임베디드 콘텐츠(embedded-content)가 예상되는 위치
[Exposed=Window,
LegacyFactoryFunction=Image(optional unsigned long width, optional unsigned long height)]
interface HTMLImageElement : HTMLElement {
[HTMLConstructor] constructor();
[CEReactions] attribute DOMString alt;
[CEReactions] attribute USVString src;
[CEReactions] attribute USVString srcset;
[CEReactions] attribute DOMString sizes;
[CEReactions] attribute DOMString? crossOrigin;
[CEReactions] attribute DOMString useMap;
[CEReactions] attribute boolean isMap;
[CEReactions] attribute unsigned long width;
[CEReactions] attribute unsigned long height;
readonly attribute unsigned long naturalWidth;
readonly attribute unsigned long naturalHeight;
readonly attribute boolean complete;
readonly attribute USVString currentSrc;
[CEReactions] attribute DOMString referrerPolicy;
[CEReactions] attribute DOMString decoding;
[CEReactions] attribute DOMString loading;
[CEReactions] attribute DOMString fetchPriority;
Promise<undefined> decode();
// also has obsolete members
};
<img>
지정된 요소의 대체 텍스트를 나타낸다.
이미지를 어떠한 이유로 가져올 수 없을 때 설정된 텍스트를 출력한다.
사용할 리소스의 경로를 설정한다.
비워있지 않은 유효한 URL을 나타내는 문자열을 나타낸다.
이미지의 경로를 지정한다.
스크린의 크기와 환경에 따라 사용할 리소스를 힌트와 함께 유저 에이전트에게 제공한다.
콤마(,
)로 구분된 하나 이상의 문자열 값이며 유저 에이전트가 환경에 따라 선택적으로 사용할 수 있는 이미지 리소스를 나타낸다.
반응형 이미지를 구현하는 애트리뷰트이다. 사용자의 다양한 스크린의 크기와 환경에 따라 최적화된 이미지를 유저 에이전트에게 후보로 제공하여 사용하게 하는 일정 형식의 문자열 데이터를 정의한다.
460px
, 800px
로 두 가지 후보가 있으며 디스크립터(descriptor)를 각각 460w
, 800w
로 정의했다. 너비(width) 디스크립터가 지정되었으므로 픽셀 밀도 계산을 위한 sizes
애트리뷰트가 명시되어야 한다. src
는 srcset
애트리뷰트를 지원하지 않는 유저 에이전트에서 사용한다.
<img
srcset="night_sky_460w.jpg 460w, night_sky_800w.jpg 800w"
sizes="(max-width: 600px) 460px, 800px"
src="night_sky_800w.jpg"
alt="저녁 하늘" />
소스 크기를 소스 집합(srcset
)에 제공하는 애트리뷰트이다.
srcset
애트리뷰트에서 너비(width) 디스크립터(descriptor)가 작성되었다면 sizes
애트리뷰트를 작성 해야한다.
리소스의 크기 집합을 나타내는 콤마로 구분된 하나 이상의 문자열을 나타낸다.
공통으로 사용하는 애트리뷰트의 경우 구문에 사용된 요소가 다를 수 있다.
<source-size-list> = <source-size>#? , <source-size-value> <source-size> = <media-condition> <source-size-value> | auto <source-size-value> = <length> | auto
추가적으로 loading
애트리뷰트가 eager
상태인 경우 sizes
애트리뷰트가 명시되어야 한다.
교차출처(CORS) 정책에 따라 리소스를 가져올지를 나타낸다.
제한된 값 집합으로 구성된 데이터를 나타낸다. 값 설정을 위한 다양한 방식이 존재할 수 있다.
교차 출처(CORS) 요청을 수행하지만 별도의 자격 증명을 보내지 않고 same-origin
으로 설정되어 익명으로 요청을 한다.
교차 출처(CORS) 요청을 수행하면서 쿠키(cookie), X.509 인증서, HTTP Basic 인증 중 한 가지 이상의 자격 증명을 포함하는 include
로 설정되어 요청을 한다.
요소에 대한 유효한 hash-name reference
유형의 값은 U+0023
NUMBER SIGN 문자(#) 다음에 같은 트리에 유형이 있는 요소의 name
속성 값과 정확히 일치하는 문자열이다.
<img src="dog.jpg" usemap="#dog" />
사용자가 이미지에서 클릭한 위치 정보를 서버로 전송해 활용할 수 있다. 상대적으로 usemap
애트리뷰트는 이미지에 대한 맵(map)을 설정해서 클릭한 위치별로 하이퍼링크(hyperlink)를 생성하는 클라이언트(client) 기반의 작동이라 한다면 ismap
애트리뷰트는 클릭한 위치 정보를 헤더(header)를 통해 서버에 전송하여 처리하는 서버 기반의 작동이라 할 수 있다.
이러한 기능을 정상적으로 동작하게 하려면 반드시 부모 요소가 href
애트리뷰트가 명시된 <a>
요소이어야 한다.
불리언(boolean
) 값을 나타낸다. 예를 들어 다음 세 가지 값은 모두 참(true
)이다.
<input disabled>
, <input disabled="disabled">
, <input disabled="">
<a href="/proc.php">
<img src="coords.jpg" ismap />
</a>
요소의 시각적 가로 크기를 CSS의 픽셀(pixels)을 기본 단위로 해서 지정한다. 음수가 아닌 유효한 정수여야 한다.
요소의 시각적 세로 크기를 CSS의 픽셀(pixels)을 기본 단위로 해서 지정한다. 음수가 아닌 유효한 정수여야 한다.
리소스를 가져올 때 사용할 리퍼러(referrer)를 나타낸다.
제한된 값 집합으로 구성된 데이터를 나타낸다. 값 설정을 위한 다양한 방식이 존재할 수 있다.
리퍼러(referrer) 헤더(header)가 전송되지 않는다.
요청의 리퍼러(referrer)로 사용할 수 있도록 요청의 전체 referrerURL
을 제거하여 보낸다. TLS(HTTPS)를 사용하지 않고 오리진(origin)으로 요청할 때 리퍼러(referrer) 헤더(header)를 보내지 않음을 의미한다. 명시적으로 지정한 정책이 없다면 기본값으로 처리된다.
same-origin-referrer
요청 및 cross-origin-referrer
요청을 모두 수행할 때 요청의 referrerURL
의 ASCII 직렬화만 리퍼러(referrer) 정보로 전송되도록 한다.
same-origin-referrer
요청을 할 때 요청의 전체 referrerURL
이 리퍼러(referrer) 정보로 전송되고 cross-origin-referrer
요청의 경우는 요청의 referrerURL
원본의 ASCII 직렬화만 리퍼러(referrer) 정보로 전송되도록 한다.
same-origin-referrer
요청을 할 때 요청의 전체 referrerURL
이 리퍼러(referrer) 정보로 전송되도록 한다. 반면에 cross-origin-referrer
요청에는 전송되지 않는다.
요청에 대한 referrerURL
원본의 ASCII 직렬화를 전송한다.
same-origin-referrer
요청을 할 때 요청의 전체 referrerURL
이 리퍼러(referrer) 정보로 전송되고 cross-origin-referrer
요청시에는 요청의 referrerURL
원본의 ASCII 직렬화만 전송되도로 한다.
요청의 전체 referrerURL
이 same-origin-referrer
요청과 cross-origin-referrer
요청 모두에게 전송되도록 한다.
이미지 디코딩(decoding)의 방식에 관해 유저 에이전트에게 제공하는 힌트를 나타낸다. 제시된 키워드중에서 하나의 값을 지정한다.
다른 콘텐츠의 표시 지연을 방지하기 위해 이미지를 비동기적으로 디코딩한다.
디코딩 모드가 없음을 나타내는 기본 값이다. 이 경우에는 유저 에이전트가 결정한다.
다른 콘텐츠와 함께 표시하기 위해 이미지를 동기적으로 디코딩한다.
리소스의 로딩 시점을 설정한다.
제한된 값 집합으로 구성된 데이터를 나타낸다. 값 설정을 위한 다양한 방식이 존재할 수 있다.
위치가 뷰포트(viewport) 내외부와 상관없이 즉시 로드한다.
유저 에이전트가 정의한 뷰포트에서 계산된 거리에 도달할 때까지 로드를 지연한다.
연결된 리소스를 가져와 처리할 때 우선 순위를 결정한다.
제한된 값 집합으로 구성된 데이터를 나타낸다. 값 설정을 위한 다양한 방식이 존재할 수 있다.
동일한 대상을 가진 다른 리소스와 비교하여 가져오기 우선 순위를 자동으로 결정한다.
동일한 대상을 가진 다른 리소스에 비해 우선 순위가 높은 가져오기를 알린다.
동일한 대상을 가진 다른 리소스에 비해 우선 순위가 낮은 가져오기를 알린다.
일부 글로벌 애트리뷰트는 이 요소에서 사용되지 않을 수 있다.
일부 글로벌 이벤트 핸들러는 이 요소에서 사용되지 않을 수 있다. 이벤트 등록은 자바스크립트 사용을 권장한다.